<template>
  <div style="margin-top:20px ; padding: 15px;">
    <Form :model="formItem" :label-width="80">
      <div class="orderForm">
        <div style="flex:1"></div>
        <div style="flex:1; display:flex">
          <div class="orFormChildren">
            <FormItem  >
              <Select v-model="formItem.select" >
                <Option
                  :value="item.statusId"
                  v-for="(item,index) 
                in statusNames"
                  :key="index"
                  @click.native="compileOrderData"
                >{{item.statusNew}}</Option>
              </Select>
            </FormItem>
          </div>

          <div>
            <FormItem class="orFormChildren" > 
              <Input v-model="formItem.input" search enter-button placeholder="请输入会员名称" @click.native="getThisStatus"/>
            </FormItem>
          </div>
        </div>
      </div>
    </Form>
    <Form>
      <Table border :columns="columns12" :data="data" size="large" class="oredrTitle">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row,index}" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="redactOrder(index)"
          >编辑</Button>
          <Button type="error" size="small" @click="getOrderDeatails(index)">查看</Button>
        </template>
      </Table>
    </Form>
    <div class="paping">
      <Page
        :total="maxPage"
        show-elevator
        show-total
        show-sizer
        :page-size-opts="[5,10,15,20]"
        :page-size="10"
        @on-change="getNewPage"
        @on-page-size-change="getPageSize"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns12: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "订单id",
          width: 100,
          key: "id"
        },
        {
          title: "会员名称",
          width: 100,
          key: "user_name"
        },
        {
          title: "地址",
          width: 420,
          key: "area"
        },
        {
          title: "快递",
          width: 150,
          key: "expressTitle"
        },
        {
          title: "状态",
          width: 150,
          key: "statusName"
        },
        {
          title: "操作",
          slot: "action",
          align: "right"
        }
      ],
      data: [],
      formItem: {
        input: "",
        select: ""
      },
      orderData: {
        pageIndex: 1,
        pageSize: 10,
        orderstatus: 0,
        vipname: ""
      },
      statusNames: [
        { statusId: 0, statusNew: "全部" },
        { statusId: 1, statusNew: "待付款" },
        { statusId: 2, statusNew: "已付款" },
        { statusId: 3, statusNew: "已发货" },
        { statusId: 4, statusNew: "已签收" },
        { statusId: 5, statusNew: "已取消" }
      ],
      maxPage:10
    };
  },
  methods: {
    getOrderData() {
      this.$axios({
        url: "/admin/order/getorderlist",
        params: {
          pageIndex: this.orderData.pageIndex,
          pageSize: this.orderData.pageSize,
          orderstatus: this.orderData.orderstatus,
          vipname: this.orderData.vipname
        }
      }).then(res => {
        if (res.data.status == 0) {
          this.data = res.data.message;
          this.maxPage = res.data.totalcount
        }
      });
    },
    compileOrderData() {
      this.orderData.orderstatus = this.formItem.select
      this.getOrderData()
    },
    getThisStatus(){
        this.orderData.vipname = this.formItem.input
        this.getOrderData()
    },
    getPageSize(pagesize){      
      this.orderData.pageSize = pagesize
      this.getOrderData()
    },
    getNewPage(newpage){
      this.orderData.pageIndex = newpage
      this.getOrderData()

    },
    getOrderDeatails(index){
      this.$router.push(`/admin/orderForm-details/${this.data[index].id}`)
    },
    redactOrder(index){
      this.$router.push(`/admin/order-edit/${this.data[index].id}`)
    }
  },
  mounted() {
    this.getOrderData();
  }
};
</script>

<style>
.orderForm {
  margin-top: 15px;
}
.ivu-table-border td,
.ivu-table-border th {
  border-right: 0px !important;
}
.oredrTitle .ivu-table {
  color: #909399;
}
.ivu-page-item {
  border: 0px !important;
  background-color: transparent !important;
  min-width: auto !important;
}
.ivu-page-item-jump-next,
.ivu-page-item-jump-prev,
.ivu-page-next,
.ivu-page-prev {
  border: 0px !important;
}
.ivu-page-next,
.ivu-page-prev {
  background-color: transparent !important;
}
.paping {
  margin-top: 10px;
}
.orderForm {
  display: flex;
}
.orderForm .orFormChildren {
  flex: 1;
}
.ivu-form-item-content {
  /* margin: 0 !important; */
}
form .ivu-select-single .ivu-select-selection {
  height: 40px !important;
  line-height: 40px;
}
form .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
form .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;
}
form .ivu-input {
  height: 40px !important;
  font-size: 14px !important;
}
form .ivu-select-item {
  font-size: 14px !important;
}
</style>
